<template>
  <view class="integra_box">
    <view class="integral_total">
      <view>成长积分</view>
      <view class="integral_total_num">{{gradeInfo.totalGrade}}</view>
      <view class="integra_info">{{gradeInfo.deptName}} - {{gradeInfo.realName}}</view>
      <view class="integra_nav">
        <navigator url="rules" hover-class="navigator-hover">积分规则</navigator>
        <text>|</text>
        <navigator url="ranking" hover-class="navigator-hover">积分排名</navigator>
      </view>
    </view>
    <view class="uni-list integra_list">
      <view class="uni-list-cell">
        <view class="integra_total">日累计 {{gradeInfo.todayTotalGrade}} 分</view>
        <rattenking-picker
          fields="day"
          start="2000-01-01"
          :end="endDate"
          :value="today"
          @change="bindChange"
          @cancel="bindCancel"
        ></rattenking-picker>
      </view>
      <view class="uni-list-cell" v-for="(item, index) in integralList" :key="index">
        <view>
          <view class="integra_list_title">{{item.ruleName}}</view>
          <view class="integra_list_time">{{item.createTime}}</view>
        </view>
        <view class="integra_list_right">
          <text class="integra_mark">+ {{item.grade}}</text>分
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { post_md5 } from '../../common/request'
export default {
  data: () => ({
    integralList: [],
    gradeInfo: {
      totalGrade: 0,
      todayTotalGrade: 0,
      deptName: '',
      realName: '',
      headUrl: ''
    },
    today: '',
    endDate: ''
  }),
  methods: {
    bindCancel() {},
    bindChange(date) {
      this.loadIntegralList(date + ' 00:00:00')
    },
    async loadIntegralList(date) {
      let res = await post_md5(
        '/integral-app/integral/usergrade/getusergrade',
        {
          stime: date,
          userId: uni.getStorageSync('userId')
        }
      )
      this.integralList = res.data.gradeDetails || []
      this.gradeInfo.realName = res.data.realName
      this.gradeInfo.deptName = res.data.deptName
      this.gradeInfo.headUrl = res.data.headUrl
      this.gradeInfo.totalGrade = res.data.totalGrade
      this.gradeInfo.todayTotalGrade = res.data.todayTotalGrade
    }
  },
  created() {
    var date = new Date()
    this.today = date.format('yyyy-MM-dd')
    this.endDate = this.today
    this.loadIntegralList(date.format('yyyy-MM-dd 00:00:00'))
  }
}
</script>

<style lang="scss">
.integra_box {
  width: 100%;

  .integral_total {
    position: relative;
    padding-top: 40upx;
    height: 344upx;
    margin: auto;
    box-sizing: border-box;
    background: linear-gradient(
      180deg,
      rgba(2, 168, 244, 1),
      rgba(146, 221, 255, 0.6)
    );
    font-size: 26upx;
    color: #ffffff;
    text-align: center;

    .integral_total_num {
      font-weight: bold;
      font-size: 97upx;
      color: #ffffff;
      line-height: 133upx;
    }

    .integra_info {
      margin: 0 auto;
      display: inline-block;
      padding: 0 20upx;
      height: 50upx;
      line-height: 50upx;
      background: #ffffff;
      border-radius: 25upx;
      color: #02a8f4;
    }

    .integra_nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 140upx;
      box-sizing: border-box;
      position: absolute;
      left: 50%;
      bottom: -50upx;
      transform: translateX(-50%);
      width: 710upx;
      height: 106upx;
      background: #ffffff;
      box-shadow: 0upx 8upx 13upx 0upx rgba(12, 3, 7, 0.08);
      border-radius: 6upx;
      color: #333333;
      font-size: 28upx;
    }
  }

  .integra_list {
    padding-top: 49upx;

    .uni-list-cell {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 43upx 0 36upx;
      height: 150upx;
      border-bottom: 1px solid rgba(230, 230, 230, 1);

      .integra_list_title {
        height: 29upx;
        font-size: 30upx;
        color: rgba(51, 51, 51, 1);
      }

      .integra_list_time {
        height: 20upx;
        font-size: 24upx;
        color: rgba(153, 153, 153, 1);
        line-height: 20upx;
        padding-top: 12px;
      }

      &:nth-of-type(1) {
        height: 118upx;
        font-size: 31upx;
        color: rgba(47, 63, 74, 1);
        line-height: 50upx;

        .integra_total {
          font-weight: bold;
          height: 118upx;
          line-height: 118upx;
        }
      }

      .integra_list_right {
        font-size: 22upx;
        color: #000;
        height: 40upx;
        line-height: 40upx;

        .integra_mark {
          margin-right: 10upx;
          font-size: 30upx;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
